<template>
  <el-dialog
    top="10px"
    width="840px"
    class="dialog-sm"
    :title="videoTitle"
    append-to-body
    :visible.sync="visible"
    :before-close="beforeClose"
  >
    <iframe
      allow="autoplay *; microphone *; fullscreen *"
      allowfullscreen="true"
      allowtransparency="true"
      allowusermedia="true"
      frameBorder="no"
      width="800px"
      height="450px"
      :src="playUrl"
    ></iframe>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    visible: Boolean,
    videoTitle: {
      type: String,
      default: '',
    },
    deviceId: String,
  },
  data() {
    return {
      playUrl: '',
    }
  },
  computed: {},
  watch: {
    visible(val) {
      if (val) {
        this.getPlayUrl()
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    getPlayUrl() {
      if (!this.deviceId) {
        return
      }
      this.axios
        .get('/iot-proxy/live/new', {
          params: {
            cameraId: this.deviceId,
          },
        })
        .then(res => {
          const data = res?.data?.data || {}
          this.playUrl = data?.url ?? ''
        })
    },
    beforeClose() {
      this.playUrl = ''
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
